// out:../css/
@import './base';
@vw:3.75vw;
//头部
header{
  width:(375/@vw);
  height:(43.99/@vw);
  padding:0 (12/@vw) 0 (18/@vw);
  display: flex;
  justify-content: space-between;

  img{
   width:(66/@vw);
   height:(30/@vw);
   object-fit: cover;
   align-self: center;
  }
  .right{
   width:(159.99/@vw);
   height:(43.99/@vw);
   display: flex;
   justify-content: space-between;

  .iconfont{
       width:(22/@vw);
       height:(22.5/@vw);
       line-height: (43.99/@vw);
       font-size:(22/@vw);
       color: #ccc;
      }
    .login{
      width:(24/@vw);
      height:(24/@vw);
      background-color:#E7E7E7;
      align-self: center;
      border-radius: (12/@vw);      
      p{
        font-size: (10/@vw);
        text-align: center;
        line-height:(24/@vw);
        color:#FF6699;
        font-weight: 600;
        padding:(2/@vw);
      }
    }
    .dwapp{
      width:(72/@vw);
      height:(24/@vw);
      background-color: #FF6699;
      align-self: center;
      border-radius:(4/@vw);

      p{
        font-size:(12/@vw);
        color: #fff;
        line-height:(24/@vw);
        text-align: center;
      }
    }
  }
}
//导航栏
.nav{
 width:(375/@vw);
 height:(40/@vw);
 display: flex;
 padding: 0 (16/@vw);
 position: relative;

 .homepage{
   width:(59.99/@vw);
   height:(40/@vw);
   font-size:(14/@vw);
   color:#FB7299;
   line-height:(40/@vw);
 }
  a{
   width: (59.99/@vw);
   height: (40/@vw);
   font-size: (14/@vw);
   color: #505050;
   line-height: (40/@vw);
 }
 .morecatey{
  width:(40/@vw);
  height:(22/@vw);
  background-color:#fff;
  position: absolute;
  align-self: center;
  right: 0;
  bottom: 10;

  .iconfont{
    width:(20/@vw);
    height:(20/@vw);
    line-height:(20/@vw);
    margin-top:(4.99999/@vw);
    margin-left:(10/@vw);
  }
 }
}
//分割线
.halving{
 width:100%;
 height:(2/@vw);
 background-color:rgba(204, 204, 204,0.1);
 padding:0 (16/@vw);
 //选中
 .select{
  height:(2/@vw);
  background-color:#FB7299;
  width:(30/@vw);
 }
}
//视频盒子区域
.video{
 width:(375/@vw);
 display: flex;
 flex-wrap: wrap;

.video_first{
 width:(182.51/@vw);
 height:(150.02/@vw);
 padding:(8/@vw)(5/@vw);
//  padding:0 (5/@vw);


 .first_one{
  width:(172.52/@vw);
  height:(97.04/@vw);
  position: relative;
  border-radius:(10/@vw);

   img{
    width:(172.52/@vw);
    height:(97.04/@vw);
    object-fit: cover;
   }
   .one_bottom{
    width:(172.52/@vw);
    height:(27.48/@vw);
    padding:(5/@vw)(6/@vw);
    position: absolute;
    left: 0;
    bottom: 0;
    justify-content: space-between;
    display: flex;

    .bottom_left{
      width:(64.03/@vw);
      height:(17.5/@vw);
      display: flex;
      align-items: center;
      .iconfont{
        font-size: (16/@vw);
        color: #fff;
        line-height:(17.5/@vw);
        margin-right:(5/@vw);
      }
      p{
        font-size: (12/@vw);
        color: #fff;
        line-height: (17.5/@vw);
        text-align: center;
      }
     
    }
    .bottom_right {
      width: (64.03/@vw);
      height: (17.5/@vw);
      display: flex;
      .iconfont {
          font-size: (16/@vw);
          color: #fff;
          line-height: (17.5/@vw);
          margin-right: (5/@vw);
        }
      p {
        font-size: (12/@vw);
        color: #fff;
        line-height: (17.5/@vw);
        text-align: center;
        }
      }
   }
    .one_text{
    width:(172.52/@vw);
    height:(31/@vw);
    margin-top:(6/@vw);

    p{
     font-size:(12/@vw);
     color:#212121 ;
     margin-top:(6/@vw);
     overflow: hidden;
     text-overflow: ellipsis;
    }
   }
  }
 }
}
//底部悬浮
footer{
  width:(351/@vw);
  height:(37.72/@vw);
  background-color: #FB7299;
  position: fixed;
  left:(15/@vw);
  bottom:(30/@vw);
  margin-bottom:(18/@vw);
  display: flex;
  align-items: center;
  border-radius:(18.86/@vw);
  padding:(12/@vw);

  .iconfont{
    width:(35/@vw);
    height:(16/@vw);
    margin-right:(12/@vw);
    color: #fff;
    margin-left:(42/@vw);
  }
  p{
    color: #fff;
    font-size:(14/@vw);
    text-align: center;
    line-height:(37.72/@vw);
  }
}